<template>
	<view class="page">
		<!-- <view class="flex benben-position-layout flex flex-wrap align-center testExamination_flex_0"
			:style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx'}">
			<view class='flex flex-wrap align-center justify-between flex-sub testExamination_fd0_0'>
				<view class='flex flex-wrap align-center' @tap.stop="handleJumpDiy" data-type="back" data-url="1">
					<text class='fu-iconfont2  testExamination_fd0_0_c0_c0'>&#xE794;</text>
				</view>
				<text class='testExamination_fd0_0_c1'>验车记录</text>
				<view class='flex flex-wrap align-center testExamination_fd0_0_c2'>
				</view>
			</view>

		</view>
		<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view> -->

		<view class="loading_css" v-if="isShow">
			<u-loading size="36" color="#FC5B03"></u-loading>
			<view>加载中</view>
		</view>
		<template v-else>
			<template v-if="list.length > 0">
				<view class="content1">
					<view class="content_title">里程及油量</view>
					<view class="list1 flex">
						<view class="list1_le"></view>
						<view class="list1_ri flex align-center justify-between">
							<view class="list1_ri_1">发车</view>
							<view class="list1_ri_1">收车</view>
							<view class="list1_ri_1">差异</view>
						</view>
					</view>
					<view class="list2 flex">
						<view class="list2_le">里程（km）</view>
						<view class="list2_ri flex align-center">
							<view class="list2_ri_1">{{upCar.km}}</view>
							<view class="list2_ri_1" style="text-align: center;" v-if="downCar">{{downCar.km}}</view>
							<view class="list2_ri_1" style="text-align: center;" v-else>无</view>
							<view class="list2_ri_1" style="text-align: right;" v-if="downCar">{{(downCar.km) - (upCar.km)}}</view>
							<view class="list2_ri_1" style="text-align: right;" v-else>无</view>
						</view>
					</view>
					<view class="list2 flex">
						<view class="list2_le">油量/电量（%）</view>
						<view class="list2_ri flex align-center">
							<view class="list2_ri_1">{{upCar.oil}}</view>
							<view class="list2_ri_1" style="text-align: center;" v-if="downCar">{{downCar.oil}}</view>
							<view class="list2_ri_1" style="text-align: center;" v-else>无</view>
							<view class="list2_ri_1" style="text-align: right;" v-if="downCar">
								{{Math.abs(Number(downCar.oil) - Number(upCar.oil))}}</view>
							<view class="list2_ri_1" style="text-align: right;" v-else>无</view>
						</view>
					</view>
				</view>
				<view class="content2">
					<view class="content_title flex align-center justify-between">
						<view class="">验车照片</view>
						<view class="title_ri flex align-center" @tap.stop="imgStatus = !imgStatus">
							<template v-if="!imgStatus">
								<view class="title_ri_text">展开</view>
								<u-icon name="arrow-down" color="#ccc" size="26"></u-icon>
							</template>
							<template v-else>
								<view class="title_ri_text">收起</view>
								<u-icon name="arrow-up" color="#ccc" size="26"></u-icon>
							</template>
						</view>
					</view>
					<template v-if="imgStatus">
						<template v-if="upCarImg.length > 0">
							<view style="height: 24rpx;"></view>
							<view class="car_title">发车</view>
							<view class="img_list">
								<view class="img_item" v-for="(v, k) in upCarImg" :key="k">
									<image :src='v' mode="aspectFill" @tap.stop="previewImage(upCarImg, k)"></image>
								</view>
							</view>
						</template>
						<template v-if="downCarImg.length > 0">
							<view class="car_title" style="margin-top: 8rpx;">收车</view>
							<view class="img_list">
								<view class="img_item" v-for="(v, k) in downCarImg" :key="k">
									<image :src='v' mode="aspectFill" @tap.stop="previewImage(downCarImg, k)"></image>
								</view>
							</view>
						</template>
					</template>
					
				</view>
				<view class="content2">
					<view class="content_title flex align-center justify-between">
						<view class="">验车视频</view>
						<view class="title_ri flex align-center" @tap.stop="videoStatus = !videoStatus">
							<template v-if="!videoStatus">
								<view class="title_ri_text">展开</view>
								<u-icon name="arrow-down" color="#ccc" size="26"></u-icon>
							</template>
							<template v-else>
								<view class="title_ri_text">收起</view>
								<u-icon name="arrow-up" color="#ccc" size="26"></u-icon>
							</template>
						</view>
					</view>
					<template v-if="videoStatus">
						<template v-if="upCarVideo">
							<view style="height: 24rpx;"></view>
							<view class="car_title">发车</view>
							<view class="video_info">
								<video :autoplay="false" class="video_content" :src="upCarVideo" id="video1"
									@play="playVedio1" @error="videoError"></video>
							</view>
						</template>
						<template v-if="downCarVideo">
							<view class="car_title" style="margin-top: 8rpx;">收车</view>
							<view class="video_info">
								<video :autoplay="false" class="video_content" :src="downCarVideo" id="video2"
									@play="playVedio2" @error="videoError"></video>
							</view>
						</template>
					</template>
					
				</view>
			</template>

			<view class="noData" v-if="list.length == 0 && !isShow">
				<image :src='STATIC_URL+"no.png"'></image>
				<view>暂无记录~</view>
			</view>
		</template>

	</view>
</template>
<script>
	export default {
		components: {},

		data() {
			return {
				"order_id": "",
				"isShow": true,
				"id": "",
				"name": "",
				"list": [],
				"upCar": "", // 提车
				"downCar": "", // 收车
				"upCarImg": [],
				"upCarVideo": "",
				"downCarImg": [],
				"downCarVideo": "",
				"imgStatus": true,
				"videoStatus": true
			};
		},
		computed: {

		},
		watch: {},
		onLoad(options) {
			let {
				order_id
			} = options;
			if (order_id !== undefined) this.order_id = order_id;
			// this.order_id = 8;
			this.getRecords();
		},
		onUnload() {

		},
		onReady() {

		},
		onShow() {

		},
		onHide() {

		},
		onResize() {

		},
		onPullDownRefresh() {

		},
		onReachBottom(e) {

		},
		onPageScroll(e) {

		},
		methods: {
			// 获取验车记录  postWorkOrder
			getRecords() {
				this.$api.post(global.apiUrls.postWorkOrder, {
					order_id: this.order_id
				}).then(res => {
					console.log(res);
					this.isShow = false;
					if (res.data.code == 1) {
						this.list = res.data.data;
						if (res.data.data.length > 0) {
							res.data.data.forEach((v, k) => {
								if (v.type == 1) {
									this.upCar = v;
									if (this.upCar.files.length > 0) {
										this.upCar.files.forEach((v1, k1) => {
											if (v1.type == 1) {
												this.upCarImg.push(v1.file_url);
											} else if (v1.type == 2) {
												this.upCarVideo = v1.file_url;
											}
										})
									}
								} else {
									this.downCar = v;
									if (this.downCar.files.length > 0) {
										this.downCar.files.forEach((v1, k1) => {
											if (v1.type == 1) {
												this.downCarImg.push(v1.file_url);
											} else if (v1.type == 2) {
												this.downCarVideo = v1.file_url;
											}
										})
									}
								}
							})
						}
					} else {
						this.$message.info(res.data.info);
					}
				})
			},
			// 预览图片
			previewImage(arr, index) {
				uni.previewImage({
					current: index,
					urls: arr
				})
			},
			playVedio1() {
				uni.createVideoContext('video1', this).requestFullScreen();
			},
			playVedio1() {
				uni.createVideoContext('video2', this).requestFullScreen();
			},
			videoError() {
				this.$message.info('视频播放失败');
			},
		}
	};
</script>
<style lang="scss" scoped>
	.content1 {
		margin: 20rpx 24rpx 0;
		border-radius: 16rpx;
		background: #fff;
		padding: 20rpx;

		.list1 {
			padding: 0 12rpx;
			margin-top: 24rpx;

			.list1_le {
				width: 240rpx;
			}

			.list1_ri {
				width: calc(100% - 240rpx);

				.list1_ri_1 {
					font-weight: bold;
					font-size: 26rpx;
					color: #506898;
				}
			}
		}

		.list2 {
			padding: 0 12rpx;
			margin-top: 24rpx;

			.list2_le {
				width: 240rpx;
				font-weight: 400;
				font-size: 26rpx;
				color: #666666;
			}

			.list2_ri {
				width: calc(100% - 240rpx);

				.list2_ri_1 {
					width: 33%;
					font-weight: 400;
					font-size: 26rpx;
					color: #666666;
				}
			}
		}
	}

	.content2 {
		margin: 20rpx 24rpx 0;
		border-radius: 16rpx;
		background: #fff;
		padding: 20rpx;
	}

	.content_title {
		font-weight: bold;
		font-size: 30rpx;
		color: #111111;

		.title_ri {
			.title_ri_text {
				font-weight: 400;
				font-size: 26rpx;
				color: #111111;
			}
		}
	}

	.car_title {
		font-weight: 400;
		font-size: 26rpx;
		color: #111111;
		margin: 0 0 16rpx;
	}

	.img_list {
		overflow: hidden;

		.img_item {
			width: 118rpx;
			height: 118rpx;
			float: left;
			margin-right: 16rpx;
			margin-bottom: 16rpx;

			image {
				width: 100%;
				height: 100%;
				border-radius: 12rpx;
			}
		}

		.img_item:nth-child(5n+5) {
			margin-right: 0;
		}
	}

	.video_info {
		width: 100%;
		height: 260rpx;
	}

	.video_content {
		width: 100%;
		height: 260rpx;
		border-radius: 12rpx;
	}

	.personalInformation_fd1_0 {
		padding: 28rpx 0;
		border-top: 2rpx solid #eee;
	}

	.personalInformation_fd1_0_c0 {
		font-size: 28rpx;
		color: rgba(0, 0, 0, 0.6);
	}

	.personalInformation_fd1_1_c1 {
		font-size: 28rpx;
		font-weight: 400;
		color: #111;
		text-align: right;
	}


	.feedback_fd4_0 {
		width: 640rpx;
		border-radius: 80rpx;
		font-size: 30rpx;
		font-weight: bold;
		color: #fff;
		margin: 0rpx 32rpx 0rpx 32rpx;
		height: 84rpx;
		line-height: 84rpx;
		text-align: center;
		background: #FC5B03;
	}

	.feedback_flex_4 {
		width: 750rpx;
		height: 120rpx;
		overflow: hidden;
		position: fixed;
		z-index: 10;
		bottom: calc(0rpx + var(--window-bottom));
		display: flex;
		justify-content: center;
		background: #fff;
	}




	.testExamination_fd1_0 {
		margin: 0rpx 16rpx 0rpx 0rpx;
		padding: 40rpx 32rpx 24rpx 32rpx;
	}

	.testExamination_fd1_0_c0 {
		width: 36rpx;
		height: 36rpx;
		margin: 0rpx 16rpx 0rpx 0rpx;
	}

	.testExamination_fd1_0_c1 {
		line-height: 45rpx;
		font-size: 32rpx;
		font-weight: 700;
		color: #333333;
	}

	.testExamination_notAnfd1_1_c0 {
		background: rgba(244, 250, 255, 1);
		background-size: 100% !important;
		width: 750rpx;
		height: 80rpx;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		padding: 0rpx 32rpx 0rpx 32rpx;
	}

	.testExamination_anfd1_1_c0 {
		background: rgba(244, 250, 255, 1);
		background-size: 100% !important;
		border-radius: 40rpx 40rpx 40rpx 40rpx;
		padding: 0rpx 32rpx 0rpx 32rpx;
		width: 750rpx;
		height: 80rpx;
	}

	.testExamination_areafd1_1_c0 {
		min-height: 80rpx;
		padding: 0rpx 32rpx 0rpx 32rpx;
	}

	.testExamination_notAnfd1_1_c0_c0_c0 {
		width: 36rpx;
		height: 36rpx;
		margin: 0rpx 16rpx 0rpx 0rpx;
	}

	.testExamination_notAnfd1_1_c0_c0_c1 {
		margin: 0rpx 20rpx 0rpx 0rpx;
		line-height: 45rpx;
		font-size: 32rpx;
		font-weight: 700;
		color: #1593FF;
	}

	.testExamination_notAnfd1_1_c0_c0_c2 {
		font-weight: 700;
		font-size: 32rpx;
		color: #1593FF;
		line-height: 45rpx;
		text-decoration: none;
		-webkit-line-clamp: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}

	.testExamination_anfd1_1_c0_c0_c0 {
		width: 36rpx;
		height: 36rpx;
		margin: 0rpx 16rpx 0rpx 0rpx;
	}

	.testExamination_anfd1_1_c0_c0_c1 {
		margin: 0rpx 20rpx 0rpx 0rpx;
		line-height: 45rpx;
		font-size: 32rpx;
		font-weight: 700;
		color: #1593FF;
	}

	.testExamination_anfd1_1_c0_c0_c2 {
		font-weight: 700;
		font-size: 32rpx;
		color: #1593FF;
		line-height: 45rpx;
		text-decoration: none;
		-webkit-line-clamp: 1;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}

	.testExamination_areafd1_1_c0_c0 {
		border-bottom: 1px solid #eee;
		padding: 32rpx 0rpx 40rpx 0rpx;
	}

	.testExamination_areafd1_1_c0_c0_c0 {
		margin: 0rpx 0rpx 24rpx 0rpx;
	}

	.testExamination_areafd1_1_c0_c0_c0_c0_c0 {
		margin: 0rpx 0rpx 24rpx 0rpx;
	}

	.testExamination_areafd1_1_c0_c0_c0_c0_c0_c0 {
		line-height: 40rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
		margin: 0rpx 15rpx 0rpx 0rpx;
	}

	.testExamination_areafd1_1_c0_c0_c0_c0_c0_c1 {
		line-height: 40rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
	}

	.testExamination_areafd1_1_c0_c0_c0_c0_c1_c0 {
		line-height: 40rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: rgba(21, 147, 255, 1);
	}

	.testExamination_areafd1_1_c0_c0_c0_c0_c1_c1 {
		line-height: 40rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
	}

	.testExamination_areafd1_1_c0_c0_c0_c0_c1_c2 {
		line-height: 40rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
	}

	.testExamination_areafd1_1_c0_c0_c0_c0_c1_c3 {
		line-height: 40rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
		margin: 0rpx 32rpx 0rpx 0rpx;
	}

	.testExamination_areafd1_1_c0_c0_c0_c0_c1_c4 {
		line-height: 40rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
	}

	.testExamination_areafd1_1_c0_c0_c0_c0_c1_c5 {
		line-height: 40rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
	}

	.testExamination_areafd1_1_c0_c0_c0_c1 {
		font-size: 26rpx;
		color: rgba(191, 191, 191, 1);
	}

	.testExamination_areafd1_1_c0_c0_c1 {
		background: rgba(242, 242, 242, 1);
		background-size: 100% !important;
		width: 602rpx;
		height: 16rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		background-size: 100% auto !important;
	}

	.testExamination_progress1_areafd1_1_c0_c0_c1 {
		background: rgba(21, 147, 255, 1);
		background-size: 100% !important;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
	}

	.testExamination_fd0_0 {
		padding: 0rpx 32rpx 0rpx 32rpx;
		height: 88rpx;
	}

	.testExamination_fd0_0_c0_c0 {
		font-size: 32rpx;
		font-weight: 500;
		color: #111;
	}

	.testExamination_fd0_0_c1 {
		font-size: 32rpx;
		font-weight: bold;
		color: #111111;
	}

	.testExamination_fd0_0_c2 {
		width: 36rpx;
		height: 36rpx;
	}

	.testExamination_flex_0 {
		background: #fff;
		border-bottom: 1px solid #eee;
		background-size: 100% !important;
		width: 750rpx;
		height: 88rpx;
		overflow: hidden;
		z-index: 10;
		top: 0rpx;
		background-size: 100% auto !important;
	}

	.page {
		min-height: calc(100vh - var(--window-bottom));
		background: #f6f7fb;
		background-size: 100% auto !important;
	}
</style>